<template>
	<view class="page" v-if="isShowPoster" @click="closeModal" @touchmove.stop.prevent="moveScoll">
		<view class="title">分享海报预览</view>
		<view class="lime-painter-box">
		<l-painter
		  @fail="fail"
		  @done="done"
		  pathType="url"
		  ref="poster"
		  performance
		  css="width: 600rpx;margin: 0 auto;height: 900rpx"
		>
		  <l-painter-view
		    css="background-color:#fff;width:100%;height: 100%;border-radius:30rpx;box-sizing:border-box;overflow:hidden"
		  >
		    <l-painter-image
		      src="https://www.helloimg.com/i/2024/11/20/673d4f811d467.png"
		      css="width:100%;height: 700rpx"
		    ></l-painter-image>
			<l-painter-view css="height: 200rpx;width: 100%;display: flex;padding: 40rpx 50rpx 40rpx 30rpx">
				<l-painter-view class="background: red;width: 100rpx;">
				  <l-painter-text
				    text="周末去哪儿玩"
				    css="font-size:40rpx;color:#000;width: 100%;height: 60rpx;line-height: 80rpx;font-weight: bold;"
				  ></l-painter-text>
				  <l-painter-text
				    text="长 按 识 别 小 程 序"
				    css="font-size:24rpx;color:#999;width: 100%;height: 60rpx;line-height: 80rpx;"
				  ></l-painter-text>
				</l-painter-view>
				<l-painter-qrcode css="width: 128rpx; height: 128rpx; margin-left: -40rpx" text="limeui.qcoon.cn"></l-painter-qrcode>
			</l-painter-view>
		  </l-painter-view>
	    </l-painter>
		</view>
		<view class="btn">
			<view class="save" @click.stop="save">保存图片</view>
			<view class="share" @click.stop="share">分享好友</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				picture2: '',
			}
		},
		props: {
			isShowPoster: {
				type: Boolean,
				default: false
			}
		},
		mounted() {},
		methods: {
			close() {
				
			},
			moveScoll() {
				console.log("禁止")
			},
			fail(v) {
				console.log(v)
			},
			done(v) {
				console.log('绘制完成:')
			},
			save() {
				this.$refs.poster.canvasToTempFilePathSync({
					fileType: 'jpg',
					quality: 1,
					success: (res) => {
						console.log(res.tempFilePath)
						this.picture2 = res.tempFilePath
						this.saveImage()
					},
					fail(e) {
						console.log('???????????',e)
					}
				})
			},
			// 保存图征
			saveImage() {
				// #ifndef H5
				uni.saveImageToPhotosAlbum({
					filePath: this.picture,
					success(res) {
						uni.showToast({
							title: '已保存到相册',
							icon: 'success',
							duration: 2000
						});
					},
				});
				// #endif
			},
			closeModal() {
				this.$emit('closeModal')
			},
			share() {
				console.log('调用分享按钮')
			}
		}
	};
</script>

<style lang="scss" scoped>
	.page{
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, .6);
		position: fixed;
		top: 0px;
		left: 0px;
		z-index: 999;
		display: flex;
		align-content: space-around;
		.title{
			width: 100%;
			position: absolute;
			text-align: center;
			top: 36%;
			height: 900rpx;
			margin-top: -450rpx;
			color: #d7d7d7;
			letter-spacing: 2px;
		}
		.btn{
			width: 600rpx;
			position: absolute;
			top: calc(36% + 900rpx);
			// background: red;
			margin-left: -300rpx;
			left: 50%;
			margin-top: -300rpx;
			height: 90rpx;
			display: flex;
			justify-content: space-between;
		}
		.save{
			width: 260rpx;
			height: 100%;
			border-radius: 70rpx;
			background: #2BA852;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
		}
		.share{
			width: 260rpx;
			height: 100%;
			border-radius: 70rpx;
			border:1px solid #2BA852;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #2BA852;
		}
	}
	
	.lime-painter-box{
		width: 600rpx;
		position: fixed;
		top: 41%;
		margin-left: -300rpx;
		left: 50%;
		height: 900rpx;
		margin-top: -450rpx;
	}
</style>
<style>
	
</style>